<template>
    <div class="continer">
        <!-- <SeachInput :disabled="false" @input="changeInput" placeholder="请输入资产编号搜索"></SeachInput>
        <selectInput placeholder="请选择资产状态" multiple>
            <a-option>Beijing</a-option>
            <a-option>Shanghai</a-option>
            <a-option>Guangzhou</a-option>
        </selectInput>
        <DateInput></DateInput>
         -->
        <TitleList></TitleList>
        <div class="mx-6 mt-5 flowWrap">
            <NavTitleCom title="入表流程" />
            <FlowChart></FlowChart>
        </div>
        <div class="mx-6 mt-5 contentWrap">
            <div class="leftWrap">
                <NavTitleCom title="资产入表动态" />
                <div style="height: 100%;">
                    <div>
                        <div class="dynamicContentWrap" v-for="item in entryDynamicData" :key="item.content">
                            <div>
                                <a-avatar :style="{ backgroundColor: '#e8eefd' }">
                                    <img src="@/assets/images/avatar.svg" alt="">
                                </a-avatar>
                            </div>
                            <div class="content">
                                <!-- <div class="text"><span>林冬冬</span>导入数据资产<span>企业自建房间数据</span></div> -->
                                <div class="text">{{ item.content }}</div>
                                <div class="dayText">{{ item.create_time }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rightWrap">
                <NavTitleCom title="各环节监控" />
                <div style="height: 100%;">
                    <MonitorPieChartCom :chartData="chartData" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import SeachInput from '@/components/input/SeachInput.vue';
import SelectInput from '@/components/input/SelectInput.vue';
import DateInput from '@/components/input/DateInput.vue';
import NavTitleCom from './components/NavTitleCom.vue';
import TitleList from './components/TitleList.vue';
import MonitorPieChartCom from './components/MonitorPieChartCom.vue';
import FlowChart from './components/FlowChart.vue';
import { useRouter } from 'vue-router';
import avatarticon from '@/assets/images/avatar.png';
import {  entryDynamicList, flowChartData_get } from '@/api/workbench';
const router = useRouter();

// const store = useCounterStore()

const quotaRankingData = ref([
    {
        id: 1,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 2,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 3,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 4,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 5,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 6,
        content: '企业自建房间数据',
        number: '323,234'
    },
    {
        id: 7,
        content: '企业自建房间数据',
        number: '323,234'
    }
]) // 额度排名数据
const navData = ref([
    {
        path: '/assetManage/resource',
        name: '资源管理'
    },
    {
        path: '/ledger',
        name: '资产台账'
    },
    {
        path: '/assetManage/subject',
        name: '资产主体'
    },
    {
        path: '/assetManage/tracing',
        name: '资产追溯'
    },
    {
        path: '/complianceRegister/property',
        name: '资产合规'
    },
    {
        path: '/complianceRegister/register',
        name: '资产登记'
    },
    {
        path: '/followMetering/amortize',
        name: '资产摊销'
    },
    {
        path: '/followMetering/impairment',
        name: '资产减值'
    }


]) // 便捷导航数据

const entryDynamicData = ref<any>([])
const dataStatisticsData = ref<any>({})
const chartData = ref<any>({})
onMounted(() => {
    getEntryDynamic()
    getChartData()
})

const changeInput = (val: string) => {
    console.log(val)
}
/**
 * @method 金额拆分
 */
const moneyVerify = (val: string) => {
    const chineseMoneyWords = /[\u4e00-\u9fa5]+/;
    const numbers = /\d+/;
    const chinesePart = val.match(chineseMoneyWords)?.toString() || '';
    const numberPart = val.match(numbers)?.toString() || '';
    return { num: numberPart, unit: chinesePart }
}
/**
 * @method 获取入表动态数据
 */
const getEntryDynamic = async () => {
    const res = await entryDynamicList({ page: 1, page_size: 3 });
    entryDynamicData.value = res.data;
}

/**
 * @method 获取节点数据
 */
const getChartData = async () => {
    const res = await flowChartData_get();
    chartData.value = res.data;
}

</script>

<style lang="less" scoped>
.continer {
    background-color: #f1f5fd;
    font-family: MicrosoftYaHei;
    padding-bottom: 50px;

    .topWrap {
        display: flex;
        height: 156px;
        padding: 16px;
        background: #FFFFFF;
        border-radius: 8px;
        gap: 16px;
        margin-bottom: 24px;

        .topWrapItem {
            flex: 1;
            background: #F7F9FC;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .title {
                font-size: 16px;
                color: #394D73;
                display: flex;
                align-items: center;

                img {
                    margin-right: 8px;
                    width: 32px;
                }
            }

            .assetsWrap {
                font-family: MicrosoftYaHeiSemibold;
                font-size: 18px;
                color: #394D73;

                // padding-top: 12px;
                .number {
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    font-size: 48px;
                    color: #394D73;
                }
            }

            .limitWrap {
                font-family: MicrosoftYaHeiSemibold;
                font-size: 18px;
                color: #394D73;
                padding-top: 10px;

                .money {
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    font-size: 36px;
                    color: #394D73;
                }
            }
        }
    }

    .flowWrap {
        height: auto;
        background: #FFF;
        border-radius: 8px;
        // overflow-x: scroll;
        padding-bottom: 50px;
    }

    .contentWrap {
        // height: 356px;
        display: flex;
        gap: 26px;
        margin-bottom: 24px;
        margin-top: 24px;

        .leftWrap {
            background: #FFF;
            flex: 1;
            border-radius: 8px;

            .dynamicContentWrap {
                padding: 15px;
                display: flex;
                flex-direction: row;
                border-bottom: 1px solid #EBF0FA;

                .content {
                    margin-left: 18px;

                    .text {
                        font-size: 16px;
                        color: #465A80;

                        span {
                            color: #1459FA;
                        }
                    }

                    .dayText {
                        margin-top: 8px;
                        font-size: 14px;
                        color: #A3B0CC;
                    }
                }
            }
        }

        .rightWrap {
            background: #FFF;
            width: 476px;
            border-radius: 8px;
        }
    }

    .bottomWrap {
        height: 386px;
        background: #FFFFFF;
        border-radius: 8px;

        .bottomContentWrap {
            display: flex;
            gap: 50px;
            padding: 20px;

            .leftWrap,
            .rightWrap {
                .title {
                    height: 21px;
                    font-family: MicrosoftYaHeiSemibold;
                    font-size: 16px;
                    color: #394D73;
                    line-height: 21px;
                    margin-bottom: 20px;
                }
            }

            .leftWrap {
                flex: 4;
            }

            .rightWrap {
                flex: 1;

                .quotaRankingContentWrap {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 17px;

                    .lineWrap {
                        height: 20px;
                        line-height: 20px;
                        display: flex;
                        justify-content: space-between;

                        .text {
                            font-size: 14px;
                            color: #465A80;

                            .icon {
                                font-size: 14px;
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                border-radius: 20px;
                                background: #EBF0FA;
                                margin-right: 8px;
                                color: #465A80;
                            }
                        }

                        .number {
                            font-size: 14px;
                            color: #465A80;
                        }
                    }
                }

            }
        }
    }
}

:deep(.arco-avatar-image) {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 24px;
        height: 24px;
    }
}
</style>
